<template>
    <div>
		<el-dialog v-model="showView" title="用户列表" width="800" :before-close="handleClose">
			<el-form>
				<el-form-item label="搜索用户">
					<el-input class="w-[280px]" v-model="queryParams.keyword" clearable />
				</el-form-item>
				<el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
			</el-form>
			<el-table size="small" v-loading="pager.loading" :data="pager.lists">
				<el-table-column type="index" label="序号" min-width="80" :index="indexAdd"/>
				<el-table-column label="名称" min-width="130" prop="nickname"/>
				<el-table-column label="图片" min-width="100" prop="avatar">
                    <template #default="{ row }">
                        <div class="flex align-middle">
                            <el-image style="width: 38px; height: 38px"
								:src="row.avatar"
								:zoom-rate="1.2"
								:max-scale="7"
								:min-scale="0.2" 
								fit="contain"
								:preview-teleported="true"
								:preview-src-list="[row.avatar]">
							</el-image>
                        </div>
                    </template>
                </el-table-column>
				<el-table-column label="账号" min-width="130" prop="account"/>
				<el-table-column label="身份" min-width="130" prop="user_type">
					<template #default="{ row }">
						<span v-if="row.user_type == 1">用户</span>
						<span v-if="row.user_type == 4">渠道</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="130">
					<template #default="{ row }">
						<el-button size="small" v-perms="['user.group/saveGroup']" v-if="type == 0" type="primary" @click="onAdmin(row)">选为管家</el-button>

					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
	import { getUserList } from '@/api/consumer'
	import { usePaging } from '@/hooks/usePaging';
	import feedback from '@/utils/feedback'
	const props = defineProps({
		is_person: { type: Boolean, default: false }
	})
	const showView = ref(false);
	const type = ref(0);// 0 就是选择管理员
	const group_id = ref(0)
	let queryParams:any = reactive({
		keyword:''
	});
	// 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: getUserList,
		params: queryParams,
		size: props.is_person ? 10: 15
	})
	const emit = defineEmits(['backAdmin','backClose'])
	const onAdmin = (row: any) => {
		emit('backAdmin', row)
		showView.value = false;
	}

	const init =  () => {
		type.value = 0;
		showView.value = true;
		getLists()
		
	} 
	const add = (id: number) => {
		console.log('group_id'+id)
		getLists()
		if (!props.is_person) {
			group_id.value = id;
			type.value = 1;
		}
		showView.value = true;
	}

	const handleClose = () => {
		emit('backClose', '')
		showView.value = false;
	}
	defineExpose({
		init,
		add,

	})
	// getLists()
</script>
